<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Fuck</title>

  <!-- <link href="https://cdn.bootcss.com/materialize/1.0.0-rc.1/css/materialize.min.css" rel="stylesheet">
  <link href="https://cdn.bootcss.com/material-design-icons/3.0.1/iconfont/material-icons.min.css" rel="stylesheet"> -->
  <link href="https://cdn.bootcss.com/fullPage.js/2.9.7/jquery.fullpage.min.css" rel="stylesheet">
  <style>
    :root {
      --primary: #9e5c4d;
      --secondary: #4b7561;
      --p-light: #d18978;
      --p-dark: #6c3024;
      --s-light: #78a48e;
      --s-dark: #204937;
      --on-dark: #ffffff;
      --on-light: #000000;
      --third: #6b753c;
    }

    #page1 {
      height: 100%;
      background-color: var(--p-dark);
      color: var(--on-dark);
    }

    #page2 {
      height: 100%;
      background-color: var(--primary);
      color: var(--on-dark);
    }

    #page3 {
      height: 100%;
      background-color: var(--p-light);
      color: var(--on-light);
    }

    #page4 {
      height: 100%;
      background-color: var(--s-light);
      color: var(--on-light);
    }

    #page5 {
      height: 100%;
      background-color: var(--secondary);
      color: var(--on-dark);
    }

    .fp-controlArrow{
      /* border-color: transparent transparent transparent var(--third); */
    }
  </style>

</head>

<body>
  <div id="main"></div>

  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/fullPage.js/2.9.7/jquery.fullpage.min.js"></script>
  <!-- <script src="https://cdn.bootcss.com/materialize/1.0.0-rc.1/js/materialize.min.js"></script> -->

  <!-- ELM -->
  <script src="./fuck.js"></script>
  <script>

    const app = Elm.Main.embed(document.getElementById('main'))

    app.ports.elm_loaded.subscribe(() => {
      console.log('加载!')
      init_fullpage()
    })

    function init_fullpage() {
      $('#fullpage').fullpage({
      })
    }
  </script>
</body>

</html>